<template>
	<el-card>
		<i id="span1" class="el-icon-user-solid"> 系统用户</i>
		<!-- 
		模糊查询系统用户 
		 -->
		<div>
			<el-form :inline="true" :model="selectUsersForm" class="demo-form-inline">
				<el-form-item label="账号:">
					<el-input v-model="selectUsersForm.username" placeholder="请输入账号"></el-input>
				</el-form-item>
				<el-form-item label="姓名:">
					<el-input v-model="selectUsersForm.name" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="性别:">
					<el-select v-model="selectUsersForm.sex" placeholder="输入性别">
						<el-option :value="'男'"></el-option>
						<el-option :value="'女'"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="手机号码:">
					<el-input v-model="selectUsersForm.phone" placeholder="请输入手机号码"></el-input>
				</el-form-item>

				<el-form-item label="用户状态:">
					<el-select v-model="selectUsersForm.status" placeholder="请选择状态">
						<el-option :value="1" label="正常">正常</el-option>
						<el-option :value="0" label="冻结">冻结</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="selectSytemUser()">筛选</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div>
			<el-button type="primary" size="small" class="but1" @click="selectAllSystemRole()">新增用户</el-button>
			<el-button class="but1" type="primary" size="small" @click="">导出</el-button>
			<el-button class="but1" type="primary" size="small" @click="">导入</el-button>
		</div>
		<div>
			<!-- 表格服务信息展示 -->
			<el-table :data="UsersList" border style="width: 100%">
				<el-table-column prop="username" label="用户账号"></el-table-column>
				<el-table-column prop="name" label="姓名"></el-table-column>
				<el-table-column prop="img" label="头像">
					<template slot-scope="scope">
						<el-image style="width: 100px; height: 100px" :src="url+scope.row.img"
							:fit=" 'contain'"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="sex" label="性别"></el-table-column>
				<el-table-column prop="birthday" label="生日"></el-table-column>
				<el-table-column prop="phone" label="手机号"></el-table-column>
				<el-table-column prop="department" label="部门"></el-table-column>
				<el-table-column prop="resdepartment" label="负责部门"></el-table-column>
				<el-table-column prop="status" label="状态">
					<template slot-scope="scope">
						{{scope.row.status==0?'冻结':'正常'}}
					</template>
				</el-table-column>
				<el-table-column prop="address" label="操作">
					<template slot-scope="scope">
						<el-button @click="selectServiceById(scope.row.id)" type="primary"
							:disabled="scope.row.status==0? true:false" size="mini">编辑</el-button>
						&nbsp;
						<el-dropdown @command="handleCommand">
							<el-button type="primary" size="mini"
								class="el-icon-arrow-down el-icon--right el-dropdown-link ">更多</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="{ id: scope.row.id, action: '详情' }">详情</el-dropdown-item>
								<el-dropdown-item :command="{ id: scope.row.id, action: '密码' }">密码</el-dropdown-item>
								<el-dropdown-item :command="{ id: scope.row.id, action: '删除' }">删除</el-dropdown-item>
								<el-dropdown-item
									:command="{ id: scope.row.id, action: (scope.row.status==0?'正常':'冻结') }">{{scope.row.status==0?'正常':'冻结'}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pageNum" :page-sizes="[1, 2, 3, 4]" :page-size="queryInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<!-- 详情列表 -->
		<div>
			<el-dialog title="详情列表" :visible.sync="XiangQingdialog">
				<el-descriptions title="" direction="horizontal" :column="1" border>
					<el-descriptions-item label="用户账号">{{SystemList.username}}</el-descriptions-item>
					<el-descriptions-item label="姓名">{{SystemList.name}}</el-descriptions-item>
					<el-descriptions-item label="头像" :span="2">
						<el-image style="width: 100px; height: 100px" :src="SystemList.img"
							:fit=" 'contain'"></el-image>
					</el-descriptions-item>
					<el-descriptions-item label="性别">{{SystemList.sex}}</el-descriptions-item>
					<el-descriptions-item label="生日">{{SystemList.birthday}}</el-descriptions-item>
					<el-descriptions-item label="手机号">{{SystemList.phone}}</el-descriptions-item>
					<el-descriptions-item label="部门">{{SystemList.department}}</el-descriptions-item>
					<el-descriptions-item label="负责部门">{{SystemList.department}}</el-descriptions-item>
					<el-descriptions-item label="状态">
						{{SystemList.status==0?'冻结':'正常'}}
					</el-descriptions-item>
				</el-descriptions>

			 	</el-dialog>
		</div>
		<!-- 修改密码和密码展示-->
		<div>
			<el-dialog width="40%" title="修改密码" :visible.sync="passworddialog">
				<el-form :inline="true" :model="passwordForm" class="demo-form-inline">
					<el-form-item label="ID:">
						<el-input v-model="passwordForm.id" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="密码:">
						<el-input v-model="passwordForm.password" placeholder="请输入密码"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="updatePassword()">修改</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
		<!-- 
		 添加系统用户
		 -->
		<el-dialog width="50%" title="新增" :visible.sync="addSystemUserdialog">
			<i id="span1" class="el-icon-orange"> 添加</i>
			<!-- <el-divider></el-divider> -->
			<div class="dialog-content">
				<el-form size="mini" ref="addSystemUserForm" :rules="rules" :model="addSystemUserForm"
					label-position="left" label-width="100px" id="elform">
					<el-form-item label="用户账号" class="input-wrapper" prop="username">
						<el-input v-model="addSystemUserForm.username" placeholder="请输入用户账号"></el-input>
					</el-form-item>
					<el-form-item label="登录密码" class="input-wrapper" prop="password">
						<el-input v-model="addSystemUserForm.password" autocomplete="off"
							placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" class="input-wrapper" prop="repassword">
						<el-input v-model="addSystemUserForm.repassword" autocomplete="off"
							placeholder="请重新输入密码"></el-input>
					</el-form-item>
					<el-form-item label="姓名" class="input-wrapper" prop="name">
						<el-input v-model="addSystemUserForm.name" placeholder="请输入用户姓名"></el-input>
					</el-form-item>
					<el-form-item label="工号" class="input-wrapper">
						<el-input v-model="addSystemUserForm.jobid" placeholder="请输入工号"></el-input>
					</el-form-item>
					<el-form-item label="选择职务" class="input-wrapper">
						<el-input v-model="addSystemUserForm.duty" placeholder="请选择职务"></el-input>
					</el-form-item>
					<el-form-item label="选择角色" class="input-wrapper">
						<el-select v-model="addSystemUserForm.rid" placeholder="请选择角色">
							<el-option v-for="item in SystemRole" :value="item.id"
								:label="item.rolename">{{item.rolename}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="部门" class="input-wrapper">
						<el-input v-model="addSystemUserForm.department" placeholder="请选择部门"></el-input>
					</el-form-item>
					<el-form-item label="负责人部门" class="input-wrapper">
						<el-input v-model="addSystemUserForm.resdepartment" placeholder="请选择负责人部门"></el-input>
					</el-form-item>
					<el-form-item label="头像" class="input-wrapper label-avatar">
						<el-upload action="http://127.0.0.1:8888/upload" list-type="picture-card"
							:on-preview="uphandlePictureCardPreview" :on-success="uphandleAvatarSuccess"
							:on-remove="uphandleRemove" :file-list="addnoticelist">
							<i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="updialogVisible">
							<img width="100%" :src="updialogImageUrl" alt="">
						</el-dialog>
					</el-form-item>
					<el-form-item label="生日" class="input-wrapper">
						<el-input type="date" v-model="addSystemUserForm.birthday" placeholder="请输入生日"></el-input>
					</el-form-item>
					<el-form-item label="性别" class="input-wrapper">
						<el-select v-model="addSystemUserForm.sex" placeholder="请选择性别">
							<el-option :value="'男'"></el-option>
							<el-option :value="'女'"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="手机号码" class="input-wrapper">
						<el-input v-model="addSystemUserForm.phone" placeholder="请输入手机号 "></el-input>
					</el-form-item>
					<el-form-item label="座机" class="input-wrapper">
						<el-input v-model="addSystemUserForm.tel" placeholder="请输入座机号"></el-input>
					</el-form-item>
					<el-form-item label="工作流引擎" class="input-wrapper">
						<el-radio v-model="addSystemUserForm.status" label="1">同步</el-radio>
						<el-radio v-model="addSystemUserForm.status" label="0">不同步</el-radio>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="addSystemUser('addSystemUserForm')">添加</el-button>
						<el-button @click="resertAddSystemUser('addSystemUserForm')">取消</el-button>
					</el-form-item>
				</el-form>
			</div>

		</el-dialog>
		<!--
		 修改系统用户
		 -->
		<el-dialog width="50%" title="修改" :visible.sync="upSystemUserdialog" @close="resertUpSystemUser">
			<i id="span1" class="el-icon-orange"> 修改</i>
			<!-- <el-divider></el-divider> -->
			<div class="dialog-content">
				<el-form size="mini" ref="upSystemUserForm" :model="upSystemUserForm" label-position="left"
					label-width="100px" id="elform">
					<el-form-item label="用户账号" class="input-wrapper" prop="username">
						<el-input v-model="upSystemUserForm.username"></el-input>
					</el-form-item>
					<el-form-item label="姓名" class="input-wrapper" prop="name">
						<el-input v-model="upSystemUserForm.name"></el-input>
					</el-form-item>
					<el-form-item label="工号" class="input-wrapper">
						<el-input v-model="upSystemUserForm.jobid"></el-input>
					</el-form-item>
					<el-form-item label="选择职务" class="input-wrapper">
						<el-input v-model="upSystemUserForm.duty"></el-input>
					</el-form-item>
					<el-form-item label="选择角色" class="input-wrapper">
						<el-select v-model="upSystemUserForm.rid">
							<el-option v-for="item in SystemRole" :value="item.id"
								:label="item.rolename">{{item.rolename}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="部门" class="input-wrapper">
						<el-input v-model="upSystemUserForm.department"></el-input>
					</el-form-item>
					<el-form-item label="负责人部门" class="input-wrapper">
						<el-input v-model="upSystemUserForm.resdepartment"></el-input>
					</el-form-item>
					<el-form-item label="头像" class="input-wrapper label-avatar">
						<el-upload action="http://127.0.0.1:8888/upload" list-type="picture-card"
							:on-preview="upuphandlePictureCardPreview" :on-success="upuphandleAvatarSuccess"
							:on-remove="upuphandleRemove" :file-list="upnoticelist">
							<i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="updialogVisible">
							<img width="100%" :src="updialogImageUrl" alt="">
						</el-dialog>
					</el-form-item>
					<el-form-item label="生日" class="input-wrapper">
						<el-input type="date" v-model="upSystemUserForm.birthday"></el-input>
					</el-form-item>
					<el-form-item label="性别" class="input-wrapper">
						<el-select v-model="upSystemUserForm.sex">
							<el-option :value="'男'" :label="男"></el-option>
							<el-option :value="'女'" :label="女"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="手机号码" class="input-wrapper">
						<el-input v-model="upSystemUserForm.phone"></el-input>
					</el-form-item>
					<el-form-item label="座机" class="input-wrapper">
						<el-input v-model="upSystemUserForm.tel"></el-input>
					</el-form-item>
					<el-form-item label="工作流引擎" class="input-wrapper">
						<el-radio v-model="upSystemUserForm.status" :label="1">同步</el-radio>
						<el-radio v-model="upSystemUserForm.status" :label="0">不同步</el-radio>
						<!-- <el-radio-group v-model="upSystemUserForm.status">
							<el-radio :label="1">同步</el-radio>
							<el-radio :label="0">不同步</el-radio>
						</el-radio-group> -->
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="upSystemUser()">修改</el-button>
						<el-button @click="resertUpSystemUser()">取消</el-button>
					</el-form-item>
				</el-form>
			</div>

		</el-dialog>
	</el-card>

</template>
<script>
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.addSystemUserForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				selectUsersForm: {
					username: '',
					name: '',
					sex: '',
					phone: '',
					status: ''
				},
				addSystemUserForm: {
					username: '',
					password: '',
					repassword: '',
					name: '',
					jobid: '',
					role: '',
					duty: '',
					department: '',
					img: '',
					birthday: '',
					sex: '',
					phone: '',
					tel: '',
					status: '',
					rid: '',
					resdepartment: ''
				},
				upSystemUserForm: {
					id:'',
					username: '',
					password: '',
					repassword: '',
					name: '',
					jobid: '',
					role: '',
					duty: '',
					department: '',
					img: '',
					birthday: '',
					sex: '',
					phone: '',
					tel: '',
					status: '',
					rid: '',
					resdepartment: ''
				},
				rules: {
					username: [{
							required: true,
							message: '请输入用户账号',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入登录密码',
							trigger: 'blur'
						},
						{
							min: 8,
							max: 15,
							message: '长度在 8 到 15 个字符',
							trigger: 'blur'
						}
					],
					repassword: [{
							required: true,
							message: '请再次输入密码',
							trigger: 'blur'
						},
						{
							validator: validatePass,
							trigger: 'blur'
						}
					],
					name: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}]
				},
				updialogVisible: false,
				updialogImageUrl: '',
				// 图片展示
				addnoticelist: [],
				upnoticelist: [],
				UsersList: [],
				// 查询到的系统角色
				SystemRole: [],
				SystemList: {
					username: '',
					name: "",
					sex: "",
					img: ""
				},
				queryInfo: {
					pageNum: 1,
					pageSize: 4,
				},
				passwordForm: {
					password: ''
				},
				total: 0,
				fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
				url: 'http://127.0.0.1:8888/showImg?filename=',
				XiangQingdialog: false,
				passworddialog: false,
				addSystemUserdialog: false,
				dialogImageUrl: '',
				dialogVisible: false,
				upSystemUserdialog: false

			}
		},
		beforeMount: function() {
			this.selectSytemUser(); // 当前页面加载完，立马执行该方法
		},
		methods: {
			/* 
			分页查询所有的系统用户
			 */
			async selectSytemUser() {
				var param = new URLSearchParams();
				param.append('pageNum', this.queryInfo.pageNum);
				param.append('pageSize', this.queryInfo.pageSize);
				param.append('username', this.selectUsersForm.username);
				param.append('name', this.selectUsersForm.name);
				param.append('sex', this.selectUsersForm.sex);
				param.append('phone', this.selectUsersForm.phone);
				param.append('status', this.selectUsersForm.status);
				let res = await this.$http.post('selectSystemUsers', param)
				if (res.data.code == 400) { // 查询失败
					this.$message.error(res.data.msg);
					this.selectUsersForm.username = ''
					this.selectUsersForm.name = ''
					this.selectUsersForm.sex = ''
					this.selectUsersForm.phone = ''
					this.selectUsersForm.status = ''
					return;
				}
				// 查询成功
				if (res.data.code == 200) {
					this.UsersList = res.data.data.list;
					// 查询总条数，赋值给total
					this.total = res.data.data.total;
					this.pageNum = res.data.data.pageNum;
					this.pageSize = res.data.data.pageSize;
					this.selectUsersForm.username = ''
					this.selectUsersForm.name = ''
					this.selectUsersForm.sex = ''
					this.selectUsersForm.phone = ''
					this.selectUsersForm.status = ''
				}
			},
			// 当每页显示的条数改变时，重新查询总数据
			handleSizeChange(size) { // size ： 改变后的每页展示的条数
				this.queryInfo.pageSize = size;
				this.queryInfo.pageNum = 1;
				this.selectSytemUser();
			},
			// 根据不同的页码，来查询总数据
			handleCurrentChange(pn) { // pn 你要访问的页码
				this.queryInfo.pageNum = pn;
				this.selectSytemUser();
			},
			/* 
			根据id查询系统用户
			 */
			async selectServiceById(id) {
				let res = await this.$http.get('selectSystemUserById/' + id)
				if (res.data.code == 400) { // 查询失败
					this.$message.error(res.data.msg);
					return;
				}
				// 查询成功
				if (res.data.code == 200) {
					this.upSystemUserdialog = true
					this.upSystemUserForm = res.data.data
					this.upnoticelist.push({
						name: this.upSystemUserForm.img,
						url: this.url + this.upSystemUserForm.img
					})
					this.selectAllSystemRole2()
				}
			},
			/* 
			 添加系统用户
			 */
			async addSystemUser(addSystemUserForm) {
				/* 
				 
				 */
				this.$refs[addSystemUserForm].validate(async (valid) => {
					if (valid) {
						var param = new URLSearchParams();
						param.append('username', this.addSystemUserForm.username);
						param.append('password', this.addSystemUserForm.password);
						param.append('name', this.addSystemUserForm.name);
						param.append('jobid', this.addSystemUserForm.jobid);
						param.append('duty', this.addSystemUserForm.duty);
						param.append('rid', this.addSystemUserForm.rid);
						param.append('department', this.addSystemUserForm.department);
						param.append('resdepartment', this.addSystemUserForm.resdepartment);
						param.append('img', this.addSystemUserForm.img);
						param.append('birthday', this.addSystemUserForm.birthday);
						param.append('sex', this.addSystemUserForm.sex);
						param.append('phone', this.addSystemUserForm.phone);
						param.append('tel', this.addSystemUserForm.tel);
						param.append('status', this.addSystemUserForm.status == '同步' ? '0' : '1');
						// alert(this.addSystemUserForm.department)
						// alert(this.addSystemUserForm.img)
						// alert(this.addSystemUserForm.status == '同步' ? '1' : '0')
						let res = await this.$http.post('addSystemUser', param)
						if (res.data.code == 400) { // 添加失败
							this.$message.error(res.data.msg);
							return;
						}
						// 添加成功
						if (res.data.code == 200) {
							this.addSystemUserdialog = false
							this.addSystemUserForm.username = ""
							this.addSystemUserForm.password = ""
							this.addSystemUserForm.name = ""
							this.addSystemUserForm.jobid = ""
							this.addSystemUserForm.duty = ""
							this.addSystemUserForm.rid = ""
							this.addSystemUserForm.department = ""
							this.addSystemUserForm.img = ""
							this.addSystemUserForm.birthday = ""
							this.addSystemUserForm.sex = ""
							this.addSystemUserForm.phone = ""
							this.addSystemUserForm.tel = ""
							this.addSystemUserForm.status = ""
							this.addSystemUserForm.resdepartment = ""
							this.addnoticelist = []
							this.selectSytemUser()
						}

					} else {
						console.log('error submit!!');
						return false;
					}
				})
			},
			uphandlePictureCardPreview(file) {
				this.updialogImageUrl = file.url;
				this.updialogVisible = true;
			},
			uphandleRemove(file, fileList) {
				console.log(file.response.msg)
				console.log(fileList)
				this.addnoticelist = [];
				this.addSystemUserForm.img = ""
			},
			uphandleAvatarSuccess(res, file) {
				if (res.code == 200) {
					if (this.addSystemUserForm.img == '') {
						this.addSystemUserForm.img = res.msg;
					} else {
						this.addSystemUserForm.img = this.addSystemUserForm.img + ',' + res.msg;
					}

				}
			},
			/* 修改圖片 */
			upuphandlePictureCardPreview(file) {
				this.updialogImageUrl = file.url;
				this.updialogVisible = true;
			},
			upuphandleRemove(file, fileList) {
				console.log(file.response.msg)
				console.log(fileList)
				this.upnoticelist = [];
				this.upSystemUserForm.img = ""
			},
			upuphandleAvatarSuccess(res, file) {
				if (res.code == 200) {
						this.upSystemUserForm.img = res.msg;
					} 	
			},
			/* 
			最添加系统用户页面,点击取消按钮,触发事件 
			 */
			resertAddSystemUser(addSystemUserForm) {
				this.$refs[addSystemUserForm].resetFields();
				this.addnoticelist = []
				this.addSystemUserdialog = false

			},
			/* 
			 点击更多按钮下拉菜单
			 */
			handleCommand(command) {
				const id = command.id;
				const action = command.action;
				// console.log(action)
				this.selectByUserId(id)
				if (action === '详情') { // 处理详情操作，使用 id 进行跳转或其他操作		
					this.XiangQingdialog = true
				} else if (action === '密码') {
					// 处理密码操作
					this.passworddialog = true
				} else if (action === '删除') { // 处理删除操作
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.deleteSystemUserById(id)
						this.selectSytemUser();
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else if (action === '冻结' || action === '正常') { // 处理冻结操作
					this.$confirm("是否继续此操作", {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.updateStatus()
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});
				}
			},
			/* 
			 根据id删除系统用户
			 */
			async deleteSystemUserById(id) {
				let res = await this.$http.get('delSystemUserById/' + id)
				if (res.data.code == 400) { // 修改
					this.$message.error(res.data.msg);
					return;
				}
				// 删除成功
				if (res.data.code == 200) {
					this.$message.success(res.data.msg);
					this.selectSytemUser()
				}
			},
			/* 
			修改密碼 
			 */
			async updatePassword() {
				var param = new URLSearchParams();
				param.append('password', this.passwordForm.password);
				param.append('id', this.passwordForm.id);
				let res = await this.$http.post('updateSystemUser', param)
				if (res.data.code == 400) { // 修改
					this.$message.error(res.data.msg);
					return;
				}
				// 修改成功
				if (res.data.code == 200) {
					this.$message.success(res.data.msg);
					this.passworddialog = false
					this.selectSytemUser()

				}
			},
			/* 
			 冻结,修改用户状态
			 */
			async updateStatus() {
				var param = new URLSearchParams();
				param.append('status', this.SystemList.status == 1 ? '0' : '1');
				param.append('id', this.SystemList.id);
				let res = await this.$http.post('updateSystemUserStatus', param)
				if (res.data.code == 400) { // 修改
					this.$message.error(res.data.msg);
					return;
				}
				// 修改成功
				if (res.data.code == 200) {
					this.$message.success(res.data.msg);
					this.selectSytemUser()

				}
			},
			/* 
			 根据id查询系统用户
			 */
			async selectByUserId(id) {
				let res = await this.$http.get('selectSystemUserById/' + id)
				if (res.data.code == 400) { // 查询失败
					this.$message.error(res.data.msg);
					return;
				}
				// 查询成功
				if (res.data.code == 200) {
					this.SystemList = res.data.data
					this.SystemList.img = this.url + this.SystemList.img;
					this.passwordForm = res.data.data
				}
			},
			/* 修改系统用户信息 */
			async upSystemUser() {
				var param = new URLSearchParams();
				param.append('id', this.upSystemUserForm.id);
				param.append('username', this.upSystemUserForm.username);
				param.append('name', this.upSystemUserForm.name);
				param.append('jobid', this.upSystemUserForm.jobid);
				param.append('duty', this.upSystemUserForm.duty);
				param.append('rid', this.upSystemUserForm.rid);
				param.append('department', this.upSystemUserForm.department);
				param.append('resdepartment', this.upSystemUserForm.resdepartment);
				param.append('img', this.upSystemUserForm.img);
				param.append('birthday', this.upSystemUserForm.birthday);
				param.append('sex', this.upSystemUserForm.sex);
				param.append('phone', this.upSystemUserForm.phone);
				param.append('tel', this.upSystemUserForm.tel);
				param.append('status', this.upSystemUserForm.status);
				// alert(this.upSystemUserForm.sex)
				// alert(this.upSystemUserForm.phone)
				// alert(this.upSystemUserForm.tel)
				// alert(this.upSystemUserForm.status)

				let res = await this.$http.post('updateSystemUser', param)
				if (res.data.code == 400) { // 修改失败
					this.$message.error(res.data.msg);
					return;
				}
				// 修改成功
				if (res.data.code == 200) {
					this.upSystemUserdialog = false
					this.selectSytemUser()
				}
			},
			/* 取消修改 */
			resertUpSystemUser() {
				this.upSystemUserdialog = false
				this.upnoticelist = []
			},
			/*
			查询所有的系统角色2
			 */
			async selectAllSystemRole2() {
				let res = await this.$http.get('selectSystemRoleAll')
				if (res.data.code == 400) { // 查询失败
					// this.$message.error(res.data.msg);
					return;
				}
				// 查询成功
				if (res.data.code == 200) {
					this.SystemRole = res.data.data
				}
			},
			/* 
			查询所有的系统角色1
			 */
			async selectAllSystemRole() {
				let res = await this.$http.get('selectSystemRoleAll')
				if (res.data.code == 400) { // 查询失败
					// this.$message.error(res.data.msg);
					return;
				}
				// 查询成功
				if (res.data.code == 200) {
					this.SystemRole = res.data.data
					this.addSystemUserdialog = true
				}
			}

		}

	}
</script>

<style>
	.but1 {
		float: left;
	}

	.input-wrapper {
		width: 300px;

	}


	.el-form-item.label-avatar .el-form-item__label {
		width: 83px;
		line-height: 120px;
	}

	/* 
	 display: flex是CSS的一个属性，用于创建一个Flexbox布局上下文。当将该属性应用于一个元素时，该元素的所有直接子元素将成为Flex容器的项目，并根据一些规则进行排列。 
	 justify-content: center是Flexbox布局的一个属性，用于控制项目在主轴上的对齐方式。在这种情况下，center将使项目在主轴上居中对齐。 
	 align-items: center是Flexbox布局的另一个属性，用于控制项目在交叉轴上的对齐方式。在这种情况下，center将使项目在交叉轴上居中对齐。
	 综合起来，display: flex; justify-content: center; align-items: center; 的作用是将元素及其子元素以Flexbox布局的方式进行排列，并使它们在主轴和交叉轴上都居中对齐。
	 */
	.dialog-content {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>